/******************************************************************************
* File description: CheckableButton.qml
* Function: 可选中的按钮
* Current Version: 1.0.0
* Author: 张宇轩
* Date: 2024-08-07
*  -----
*  Copyright by 博坤生物 .
 *****************************************************************************/
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Layouts 1.14


Rectangle {
    id: checkableBtn

    /* property 定义开始 */
    // 按钮状态
    property int checkableButtonState: GLOBAL.CheckableButtonState.Default
    // 文字状态
    property int checkableFontState: GLOBAL.CheckableFontState.Default
    // 选中状态
    property bool isChecked: false

    // 默认
    // 按钮
    property int checkableBtnRadius: 16
    property string defaultColor: "transparent"
    property int defaultBorderWidth: 0
    property string defaultBorderColor: "#FFF"

    // 文字
    property string fontFimily: "Alibaba PuHuiTi"
    property int fontPixelSize: 16
    property string fontColor: "#FFFFFFFFF"
    property string defaultText: "--Default Text--"

    // 选中后
    // 按钮
    property int checkedRadius: 0
    property string checkedColor: "transparent"
    property int checkedBorderWidth: 0
    property string checkedBorderColor: "#FFFF6000"

    // 文字
    property string checkedFontColor: "#FFFF6000"
    property string checkedText: "--Checked Text--"

    // 信号
    signal clicked();

    /* property 定义结束 */

    implicitWidth: checkableBtnLabel.implicitWidth
    implicitHeight: checkableBtnLabel.implicitHeight
    state: checkableButtonState // 按钮状态
    radius: checkableBtnRadius
    border {
        width: checkableButtonState === GLOBAL.CheckableButtonState.Default ?
                   defaultBorderWidth
                 :
                   checkedBorderWidth
        color: checkableButtonState === GLOBAL.CheckableButtonState.Default ?
                   defaultBorderColor
                 :
                   checkedBorderColor
    }
    color: checkableButtonState === GLOBAL.CheckableButtonState.Default ?
               defaultColor : checkedColor

    Text {
        id: checkableBtnLabel
        state: checkableFontState // 按钮状态
        font {
            family: fontFimily
            pixelSize: fontPixelSize
        }
        color: checkableFontState === GLOBAL.CheckableFontState.Default ?
                   fontColor : checkedFontColor
        text: checkableFontState === GLOBAL.CheckableFontState.Default ?
                  defaultText : checkedText
        // 状态
        states: [
            // 默认状态
            State {
                name: GLOBAL.CheckableFontState.Default
                PropertyChanges {
                    target: checkableBtnLabel
                    text: defaultText
                    color: fontColor
                }
            },
            // 选中状态
            State {
                name: GLOBAL.CheckableFontState.Checked
                PropertyChanges {
                    target: checkableBtnLabel
                    text: checkedText
                    color: checkedFontColor
                }
            }
        ]
    }

    // 下框线
    Canvas {
        id: checkButtonBottomLine
        anchors.fill: parent
        antialiasing: true
        onPaint: {
            var ctx = getContext("2d")
            ctx.clearRect(0, 0, width, height)
            ctx.strokeStyle = checkableButtonState === GLOBAL.CheckableButtonState.Default ?
                        defaultBorderColor
                      :
                        checkedBorderColor
            ctx.lineWidth = 2
            ctx.beginPath()
            ctx.moveTo(0, height)
            ctx.lineTo(width, height)
            ctx.stroke()
            }
    }

    // 状态
    states: [
        // 默认状态
        State {
            name: GLOBAL.CheckableButtonState.Default
            PropertyChanges {
                target: checkableBtn
                border {
                    width: defaultBorderWidth
                    color: defaultBorderColor
                }
                color: defaultColor
            }
        },
        // 选中状态
        State {
            name: GLOBAL.CheckableButtonState.Checked
            PropertyChanges {
                target: checkableBtn
                border {
                    width: checkedBorderWidth
                    color: checkedBorderColor
                }
                color: checkedColor
            }
        }
    ]

    MouseArea {
        anchors.fill: parent
        cursorShape: Qt.PointingHandCursor
        onClicked: {
            checkableBtn.clicked()
        }
    }

    // checked状态变化
    onIsCheckedChanged: {
        if(!isChecked){
            checkableButtonState = GLOBAL.CheckableButtonState.Default
            checkableFontState = GLOBAL.CheckableFontState.Default
            // 下框线重绘
            checkButtonBottomLine.requestPaint()
        }else {
            checkableButtonState = GLOBAL.CheckableButtonState.Checked
            checkableFontState = GLOBAL.CheckableFontState.Checked
            // 下框线重绘
            checkButtonBottomLine.requestPaint()
        }
    }
}
